<!--配药参数-->
<template>
  <div class="series-con-area">
    <div class="series-con-item" v-if="seriesParamDetail.name === '加药时间'" v-for="(seriesParamDetail, seriesIndex) in seriesData.seriesParamsArray" :key="seriesIndex">
      <div class="series-con-label">
        <span> {{ seriesParamDetail.name }}： </span>
      </div>
      <div class="series-con-box" v-for="(item, index) in dateArr" :key="index">
        <input readonly type="text" @click="selectTime(index)" v-model="item.value" placeholder="请选择日期" />
        <span class="arrow-right" v-if="!disabled">
          <x-icon type="ios-plus-empty" fill="#fff" size="20" v-if="!index" @click="addTime(index)"></x-icon>
          <x-icon type="ios-close-empty" fill="#fff" size="20" v-else @click="removeTime(index)"></x-icon>
        </span>
      </div>
    </div>
    <div class="series-con-item" v-else-if="seriesParamDetail.name === '报表通知'">
      <template v-if="!message">
        <div class="series-con-label">{{ seriesParamDetail.name }}：</div>
        <div class="series-con-box series-con-full">
          <input readonly type="text" :value="informName" maxlength="8" @click="onInformShow(seriesIndex)" />
          <div class="err-msg" v-if="errMsg">{{ errMsg }}</div>
        </div>
      </template>
    </div>
    <div class="series-con-item" v-else>
      <div class="series-con-label">{{ seriesParamDetail.name }}：</div>
      <div class="series-con-box series-con-full">
        <input @blur="inputCheck" :disabled="disabled" type="text" v-model="seriesParamDetail.value" maxlength="8" />
        <div class="err-msg" v-if="errMsg">{{ errMsg }}</div>
      </div>
    </div>
    <div v-transfer-dom>
      <popup v-model="showJob">
        <!-- group already has a top border, so we need to hide header's bottom border-->
        <popup-header left-text="取消" right-text="确定" title="请选择报表通知" :show-bottom-border="false" @on-click-left="showJob = false" @on-click-right="onInformOk"> </popup-header>
        <group gutter="0">
          <radio :options="informList" v-model="informId"></radio>
        </group>
      </popup>
    </div>
  </div>
</template>

<script>
import ApplicationDao from '@/daos/application';
import { PopupHeader, Popup, TransferDom, Group, Radio, Confirm } from 'vux';
import dayjs from 'dayjs';
export default {
  name: 'seriesPeiyao',

  directives: {
    TransferDom,
  },
  data() {
    return {
      errMsg: '',
      message: '',
      informId: '',
      dateArr: [{ value: '' }],
      index: 0,
      showJob: false,
      selectUserShow: false,
      selectUserData: null,
      selectUserType: 'user',
      selectUserList: [],
      tipWechatUser: [],
      informList: [],
    };
  },

  components: {
    PopupHeader,
    Popup,
    Group,
    Radio,
    Confirm,
  },
  // components: {
  //   selectUser,
  // },

  computed: {
    informName() {
      let res = this.informList.find((e) => e.key === this.informId);
      return res ? res.value : '';
    },
  },
  props: {
    seriesData: {
      type: Object,
      default() {
        return {};
      },
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  mounted() {
    this.init();
    this.getLeftMenu();
  },
  methods: {
    init() {
      // selectLeader.value.splice(0);
      if (this.$route.query.message) {
        this.message = 'see';
      }
      this.seriesData.seriesParamsArray.forEach((e) => {
        if (e.name === '报表通知' && e.value) {
          this.informId = e.value;
        }
        if (e.name === '加药时间' && e.value) {
          this.dateArr.splice(0);
          this.dateArr.push(
            ...e.value.split(' , ').map((e) => {
              return { value: e };
            })
          );
        }
      });
    },
    getLeftMenu() {
      ApplicationDao.getLeftMenu({ moduleType: 1 }, (res) => {
        if (res) {
          let result = res.data.find((e) => e.name === '生产管理');

          if (result) {
            this.getInformConfig(result.id);
          }
        }
      });
    },
    getInformConfig(moduleMangeId) {
      let params = {
        moduleMangeId,
        initiateMode: 1,
        orgId: this.$store.state.user.org.id,
        pageNum: 1,
        pageSize: 99,
      };

      ApplicationDao.getInformConfig(params, (res) => {
        if (res.data) {
          res.data.forEach((item) => {
            this.informList.push({ key: item.id, value: item.informName });
          });
        }
      });
    },
    inputCheck(tag = false) {
      this.errMsg = '';
      if (!tag) {
        this.dataSave();
      }
    },
    onInformShow(index) {
      this.showJob = true;
      this.index = index;
    },
    onInformOk() {
      this.showJob = false;
      this.seriesData.seriesParamsArray[this.index].value = this.informId;
      console.log(this.informId);
    },
    addTime() {
      this.dateArr.push({
        value: '',
      });
      this.eventTimeChange();
    },
    removeTime(index) {
      this.dateArr.splice(index, 1);
      this.eventTimeChange();
    },
    eventTimeChange() {
      let item = this.seriesData.seriesParamsArray.find((e) => e.name === '加药次数');
      item.value = this.dateArr.length + '';
      let date = this.seriesData.seriesParamsArray.find((e) => e.name === '加药时间');
      date.value = this.dateArr
        .filter((e) => e.value)
        .map((e) => dayjs(e.value).format('YYYY-MM-DD HH:mm'))
        .join(' , ');
    },
    selectTime(index) {
      this.index = index;
      if (this.disabled) {
        return;
      }
      let that = this;
      this.$vux.datetime.show({
        cancelText: '取消',
        confirmText: '确定',
        format: 'YYYY-MM-DD HH:mm',
        startDate: '',
        onConfirm(value) {
          that.dateArr[that.index].value = value;
          that.eventTimeChange();
        },
        onHide(type) {},
      });
    },
    eventPople() {
      this.selectUserShow = true;
    },
    handlePersonSelected(data) {
      if (data.length) {
        let item = this.seriesData.seriesParamsArray.find((e) => e.name === '报表通知');
        item.valueId = data.map((e) => e.id).join(' , ');
        item.value = data.map((e) => e.name).join(' , ');

        this.tipWechatUser.splice(0);
        this.tipWechatUser = data.filter((e) => !e.wechatId).map((e) => e.name);
        if (this.tipWechatUser.length) {
          // 显示
          this.$vux.alert.show({
            title: '',
            content: `${this.tipWechatUser.join(' , ')}用户未关注【IU工业云】公众号，将无法接收公众号通知`,
            onShow() {},
            onHide() {},
          });
        }
      }
    },
    dataSave() {
      this.$store.commit('changeProduceDataStatus');
    },
    // 是否数字
    isNumber(source) {
      let flag = /^([0-9]*|\d*\.\d{1,2}?)$/.test(source);
      // console.log(flag,source);
      return flag;
    },
    maxCheck(source, max) {
      if (!source) {
        return true;
      }
      return +source <= +max;
    },
  },
};
</script>
<style lang="less" scoped>
.series-con-area {
  margin-bottom: 16px;
}
.series-con-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  // align-items: flex-start;
  // padding: 4px 0;
  margin-bottom: 16px;
  .series-con-label {
    // display: flex;
    // justify-content: space-between;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 6px;
  }
  .series-con-box {
    flex: none;
    color: #ffffff;
    font-size: 14px;
    position: relative;
    margin-bottom: 8px;
    width: 75%;
    .arrow-right {
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      justify-content: center;
      width: 30px;
    }
    input {
      touch-action: none;
      width: 100%;
      border: 0;
      // text-align: center;
      color: #ffffff;
      font-size: 14px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.6);
      &:readonly {
        background: none;
        color: #ffffff;
        // -webkit-text-fill-color:#ffffff;
      }
      &.full {
        width: 100%;
      }
    }
    input::-webkit-input-placeholder {
      /* Chrome/Opera/Safari */
      color: #ffffff;
    }
    input::-moz-placeholder {
      /* Firefox 19+ */
      color: #ffffff;
    }
    input:-ms-input-placeholder {
      /* IE 10+ */
      color: #ffffff;
    }
    input:-moz-placeholder {
      /* Firefox 18- */
      color: #ffffff;
    }
    textarea {
      width: 100%;
      height: 80px;
      border: 0;
      background: #ffffff;
      color: #22233f;
      font-size: 14px;
      padding: 8px;
      border-radius: 2px;
    }
    .err-msg {
      color: #ff2c2c;
      font-size: 12px;
    }
  }
}
.series-con-full {
  flex-direction: column;
  .series-con-label {
    width: 100%;
  }
}
</style>
